<template>
<!--销售收款界面-->
  <div>
    <div class="pay-buy-order-box">
      <el-form :model="accountSale" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="收款销售单号:" required>
            <el-tag style="margin-right: 20px"  type="danger" effect="dark" v-for="(item,index) in accountSale.saleOrderIdList" :key="index">{{item.saleOrderId}}</el-tag>
        </el-form-item>
        <div style="display: flex">
          <el-form-item style="flex: 1" label="财务类型" required >
            <el-button-group>
              <el-button  type="success" >收入></el-button>
              <el-button  type="success">销售收入></el-button>
              <el-button  type="success" >销售收入</el-button>
            </el-button-group>
          </el-form-item>
          <el-form-item style="flex: 1" label="付款方:" required>
              <span style="font-size: 17px;font-weight: bold">{{accountSale.clientName}}</span>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item style="flex: 1" label="销售单总价" required>
            <span style="font-size: 17px;font-weight: bold;color: #ff3526">{{accountSale.allSaleOrderMoney}}</span>
            <span  style="font-size: 17px;font-weight: bold;color: #ff3526;font-style: oblique">元</span>
          </el-form-item>
          <el-form-item style="flex: 1" label="已收金额" required>
            <span style="font-size: 17px;font-weight: bold;">{{accountSale.nowGiveMoney}}</span>
            <span  style="font-size: 17px;font-weight: bold ;font-style: oblique">元</span>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item style="flex: 1" label="应收款" required>
            <span style="font-size: 17px;font-weight: bold;color: #ff3526">{{accountSale.shouldGiveMoney}}</span>
            <span  style="font-size: 17px;font-weight: bold;color: #ff3526;font-style: oblique">元</span>
          </el-form-item>
          <el-form-item style="flex: 1" label="实收金额" prop="payMoney" >
            <el-input v-model="accountSale.payMoney" placeholder="元" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" clearable style="width: 160px"></el-input>
            <span style="font-weight: bold;font-size: 16px">&nbsp;元&nbsp;</span>
            <el-checkbox v-model="accountSale.isOver">结算完毕(抹去零头)</el-checkbox>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item style="flex: 1" label="收款时间" prop="payTime">
            <el-date-picker
              v-model="accountSale.payTime"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item style="flex: 1" label="经办人" required>
            <el-tag>{{employeeName}}</el-tag>
          </el-form-item>
        </div>

        <el-form-item style="flex: 1" label="收款方式" required >
          <el-radio-group v-model="accountSale.payOrTakeWay" >
            <el-radio v-for="(item,index) in payOrTakeList" :key='index' :label="item.payTakeId" border >{{ item.payTakeName }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item style="flex: 1" label="备注" >
          <el-input type="textarea" style="width: 400px" :rows="3"
                    maxlength="50"
                    show-word-limit
                    v-model="accountSale.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button :loading="this.loading" type="primary" @click="submitForm('ruleForm')"><span style="font-weight: bold;font-size: 16px">确认收款</span></el-button>
          <el-button :loading="this.loading" type="danger" @click="resetForm('ruleForm')"><span style="font-weight: bold;font-size: 16px">重置账务</span></el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>
import {get, post} from "../../utils/request";

export default {
  name: "PaySaleOrder",
  props:['multipleSelection'],
  data(){
    return{
      loading:false,
      accountSale:{

        saleOrderIdList:[],
        remark:null,
        clientId:null,
        allSaleOrderMoney:0,
        nowGiveMoney:0,
        shouldGiveMoney:0,
        payMoney:null,
        isOver:false,
        payTime:null,
        payOrTakeWay:null,
        clientName:null,


      },
      payOrTakeList:[],
      employeeName:null,
      rules: {
        payMoney: [
          { required: true, message: '请输入收款金额', trigger: 'blur' },
        ],

        payTime: [
          { type: 'date', required: true, message: '请选择收款日期', trigger: 'change' }
        ]
      },
      pickerOptions: {

        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },

    }
  },
  created() {
    this.accountSale.payTime=new Date()
    get("/api/v1/token/showRealName").then(resp=>{
      this.employeeName=resp.data
    })
    get('/api/v1/paytake/find/all').then(resp=>{
      this.payOrTakeList=resp.data
      this.accountSale.payOrTakeWay=this.payOrTakeList[0].payTakeId

    })
    },
  mounted() {
     this.accountSale= {
      saleOrderIdList:[],
        remark:null,
        clientId:null,
        allSaleOrderMoney:0,
        nowGiveMoney:0,
        shouldGiveMoney:0,
        payMoney:null,
        isOver:false,
        payTime:null,
        payOrTakeWay:null,
       clientName:null,


     }
    this.accountSale.payTime=new Date()
    this.fleshNewMsg()
    },
  methods:{
    fleshNewMsg(){
      this.accountSale.clientId=this.multipleSelection[0].client.clientId
      this.accountSale.clientName=this.multipleSelection[0].client.clientName
      for (let i = 0; i <this.multipleSelection.length ; i++) {
        this.accountSale.saleOrderIdList.push({saleOrderId:this.multipleSelection[i].saleOrderId,outStorageDate:this.multipleSelection[i].outStorageDate})
        this.accountSale.allSaleOrderMoney+=this.multipleSelection[i].sumMoney;
        this.accountSale.nowGiveMoney+=this.multipleSelection[i].given
      }
      this.accountSale.shouldGiveMoney=Math.round((this.accountSale.allSaleOrderMoney-this.accountSale.nowGiveMoney)*100)/100
    },
    submitForm(formName) {
      this.loading=true
      if ((this.accountSale.shouldGiveMoney-this.accountSale.payMoney)<0){
        this.$message.error("收款的费用已经超出所需,请修改实收金额")
        this.loading=false
        return
      }
      if (this.accountSale.payMoney==="0"){
        this.$message.error("实收金额不能为0元")
        this.loading=false
        return
      }

      this.$refs[formName].validate((valid) => {
        if (valid) {

            post('/api/v1/post/account/special/sale',this.accountSale).then(resp=>{
                if (resp.data.code===1){
                  this.$message({
                    message: resp.data.msg,
                    type: 'success'
                  });
                  this.loading=false
                  this.$emit('aNewThing')
                   // this.$router.push({name:'FindBuyRecording'})
                }else {
                  this.$message.error(resp.data.msg)
                  this.loading=false
                }
            }).catch(resp=>{
               this.$message.error("系统出bug了,快找bug")
              this.loading=false
            })
        } else {
          this.loading=false
          return false;
        }
      });
    },
    resetForm(formName) {
      this.accountSale.remark=null
      this.accountSale.isOver=false
        this.accountSale.payOrTakeWay=this.payOrTakeList[0].payTakeId
      this.$refs[formName].resetFields();
    }
  },
  watch:{
    'multipleSelection'(){
      this.accountSale=  {
        saleOrderIdList:[],
        remark:null,
        clientId:null,
        allSaleOrderMoney:0,
        nowGiveMoney:0,
        shouldGiveMoney:0,
        payMoney:null,
        isOver:false,
        payTime:null,
        payOrTakeWay:null,
        clientName:null,
      }
      this.accountSale.payTime=new Date()
      if (this.multipleSelection.length===0){
        get('/api/v1/paytake/find/all').then(resp=>{
          this.payOrTakeList=resp.data
          this.accountSale.payOrTakeWay=this.payOrTakeList[0].payTakeId
        })
      }else {
        this.accountSale.payOrTakeWay=this.payOrTakeList[0].payTakeId
      }

      if (this.multipleSelection.length!==0){
        this.fleshNewMsg()
      }

    }
  },
  beforeDestroy() {

  }

}
</script>

<style scoped>
.pay-buy-order-box{
  min-height: 400px;
}
</style>
